<template>
  <div>
    <el-container>
      <el-aside :width="menuWidth"
                style="background-color: rgb(238, 241, 246)">
        <MyAside :isCollapse="isCollapse"
                 :logTestShow="logTestShow" />
      </el-aside>

      <el-container>
        <el-header style=" border-bottom: 1px #545c64 solid;">
          <MyHeader :iconMenu="iconMenu" />
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>

  </div>

</template>

<script>
import MyAside from '@/components/MyAside.vue';
import MyHeader from '@/components/MyHeader.vue'
export default {
  name: 'HomeView',
  components: { MyAside, MyHeader },
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {

      isCollapse: false,//菜单控制收起
      menuWidth: "200px",//默认左侧菜单栏宽度，收缩控制
      iconMenu: "el-icon-s-fold",
      logTestShow: true,
      dialogVisible: false,//弹窗
    }
  },
  created () {

  },

  methods: {
    collapse () {
      this.isCollapse = !this.isCollapse;
      this.logTestShow = !this.logTestShow
      if (!this.isCollapse) {//如果未收缩
        this.menuWidth = "200px"
        this.iconMenu = "el-icon-s-fold"
      } else {
        this.menuWidth = "64px"
        this.iconMenu = "el-icon-s-unfold"
      }
    },

  },
}
</script>
